<template>
  <!-- 巡检计划 -->
  <div class="plan-box1 bigTableStyle">
    <div class="filter-box">
      <div class="filter-1">
        <el-form ref="elForm" :inline="false" :model="formData" size="medium" label-width="1.2rem">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="账号:" prop="time">
                    <el-input v-model="formData.zhanghao"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="性别:" prop="time">
                    <el-select
                      v-model="formData.substation"
                      size="small"
                      placeholder="请选择"
                      filterable
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in SubstationList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="真实姓名:" prop="time">
                    <el-input v-model="formData.zhanghao"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="用户状态:" prop="time">
                    <el-select
                      v-model="formData.planStatus"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in PlanstatusList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row :gutter="1">
            <el-col :span="2">
              <el-row :gutter="1">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="UserDrawer=true"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-plus"
                  >添加用户</el-button>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="2">
              <el-row :gutter="1">
                <el-col :span="2">
                  <el-button
                    type="primary"
                    @click="querysubmitForm"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-top"
                  >导出</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-row :gutter="1">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="querysubmitForm"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-bottom"
                  >导入</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-row :gutter="1">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="querysubmitForm"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-delete"
                  >回收站</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-row :gutter="1">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="querysubmitForm"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-search"
                  >高级查询</el-button>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="4" :offset="10">
              <el-row :gutter="15">
                <el-col :span="24" class="betweenbox">
                  <el-button
                    type="primary"
                    @click="querysubmitForm"
                    class="centerbox conditionQuryBtn buttonWin"
                    icon="el-icon-search"
                  >查询</el-button>
                  <el-button
                    class="table-query"
                    icon="el-icon-refresh-right"
                    type="primary"
                    @click="resForm"
                  >重置</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="bottom-border"></div>
    <div class="self-table">
      <el-table
        border
        :data="newTableData"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
        v-loading="isShowLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        default-sort="{prop:'JHKSSJ',order:'descending'}"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="NUM" label="序号" :show-overflow-tooltip="true" width="100"></el-table-column>
        <el-table-column prop="SSDSMC" label="用户账号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="BDZMC" label="用户姓名" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="DYDJMC" label="头像" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="XSLX" label="性别" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{scope.row.XSLX | xjlx}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="JHKSSJ"
          label="生日"
          :show-overflow-tooltip="true"
          width="250"
          sortable
        ></el-table-column>
        <el-table-column prop="STATUSName" label="手机号码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SFQXName" label="部门" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SFQXName" label="负责部门" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SFQXName" label="状态" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button @click="handleCkick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleCkick(scope.row)" type="text" size="small">更多</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="self-pagination elPaginationStyle centerbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <!-- <adduser/> -->
    <el-drawer title="新增" :visible.sync="UserDrawer" :with-header="true">
      <el-form v-if="UserDrawer" style="padding-left:0.5rem" ref="form" :model="form" label-width="1.2rem">
        <el-row>
          <el-col :span="18">
            <el-form-item label="用户账号：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="登录密码：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="确认密码：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="用户姓名：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="工号：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="职务：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="角色分配：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="部门分配：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="租户分配：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="用户身份：">
              <el-radio v-model="form.radio" label="1">普通用户</el-radio>
              <el-radio v-model="form.radio" label="2">上级</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="用户头像：">
              <el-upload
                class="avatar-uploader"
                action
                :show-file-list="false"
                :on-success="handleAvatarSucces"
                :before-upload="handleAvatarUpload"
              >
                <img v-if="imageUrl" src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="用户生日：">
              <el-date-picker
                class="birthDayTimeInput"
                v-model="form.birthDayTime"
                type="date"
                placeholder="选择生日"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="性别:" prop="time">
              <el-select
                v-model="form.substation"
                size="small"
                placeholder="请选择"
                filterable
                :style="{width: '100%'}"
                clearable
              >
                <el-option
                  v-for="item in SubstationList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="邮箱：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="手机号码：">
              <el-input disabled v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item class="operationMenu">
              <el-button class="table-query" type="primary" @click="UserDrawer=false">取消</el-button>
              <el-button class="table-query" type="primary">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import adduser from "./modules/addUser/index.vue";
import lodash from "lodash";
import todate from "@/utils/date";
import timeThisWeek from "@/utils/timeThisWeek.js";
import time from "@/utils/time.js";
import { log } from "three";

interface optionList {
  value: string;
  label: string;
}
@Component({
  components: { adduser },
  filters: {
    xjlx(val: any) {
      switch (val) {
        case "1":
          val = "例行巡检";
          break;
        case "2":
          val = "自定义巡检";
          break;
        case "3":
          val = "专项巡检";
          break;
        case "4":
          val = "熄灯巡检";
          break;
        case "5":
          val = "特殊巡检";
          break;
      }
      return val;
    },
  },
})
export default class extends Vue {
  public imageUrl: string = "";
  // 表单
  public form: any = {
    userName: "",
    radio: "1",
    imageUrl: "",
    birthDayTime: "",
  };
  handleAvatarSucces(res, file) {
    console.log(res, file);
  }
  handleAvatarUpload(file) {
    const isJPG = file.type === "image/jpeg";
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
      this.$message.error("上传头像只能是JPG格式！");
    }
    if (!isLt2M) {
      this.$message.error("上传头像图片大小不能超过2MB！");
    }

    return isJPG && isLt2M;
  }

  //用户新增弹窗
  public UserDrawer: boolean = false;
  //表格加载状态
  isShowLoading = true;
  rputerPlan: "";
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  // 下拉框变电站电压等级
  get VoltageList() {
    let VoltageList = JointInspectionModule.getDydjList || [];
    return VoltageList;
  }
  // 下拉框计划状态
  get PlanstatusList() {
    let PlanstatusList = JointInspectionModule.getJhztList || [];
    console.log("下拉框计划状态:", PlanstatusList);
    return PlanstatusList;
  }
  // 下拉框巡检类型
  get InspectTypeList() {
    let InspectTypeList = JointInspectionModule.getXslxList || [];
    return InspectTypeList;
  }

  // 1. 是否取消：
  private isCancelList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "1",
      name: "未取消",
    },
    {
      code: "2",
      name: "已取消",
    },
  ];

  //搜索框from表单数据
  public formData: any = {
    company: "", // 所属地市ID
    substation: "", // 变电站ID
    Voltage: "", // 电压等级
    planStatus: "", // 计划状态''全部，0未执行，1执行中,2已执行,3执行失败
    isCancel: "", // 是否取消''全部，0未取消,1取消
    InspectType: "", // 巡检类型
    plantime: [], // 计划时间
  };
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  $refs!: {
    elForm: any;
  };

  // 勾选的消息
  tableSelect = [];

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //返回按钮
  goBack() {
    window.history.back();
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      // duration: 0,
      // showClose: true,
      type: "warning",
    });
  }

  // 获取选中的信息
  get newTableSelect() {
    let tableSelect = this.tableSelect;
    return tableSelect;
  }

  //  计划管理
  planManage(): void {
    // console.log("this.tableSelect:", this.tableSelect);
    if (this.tableSelect.length == 0) {
      this.totast("请勾选一条巡检计划！");
      return;
    }
    if (this.tableSelect.length > 1) {
      this.totast("计划调整只能勾选一条记录！");
      return;
    }
    let jhzt = this.tableSelect[0].STATUS;
    let jhlx = this.tableSelect[0].XSLX;
    if (jhlx == "2") {
      if (jhzt != "0") {
        this.totast("自定义巡检只能调整状态为'未巡检'的计划！");
        return;
      }
    } else {
      if (jhzt != "0" && jhzt != "1") {
        var jhlxmc = "";
        if (jhlx == "1") {
          jhlxmc = "例行巡检";
        } else if (jhlx == "3") {
          jhlxmc = "专项巡检";
        } else if (jhlx == "4") {
          jhlxmc = "熄灯巡检";
        } else if (jhlx == "5") {
          jhlxmc = "特殊巡检";
        }
        this.totast(jhlxmc + "只能调整状态为'未巡检'和'巡检中'的计划！");
        return;
      }
    }
    let sfqx = this.tableSelect[0].SFQX;
    if (sfqx == "2") {
      this.totast("已取消的计划不能进行调整！");
      return;
    }
  }
  handleClose() {
    this.report_dialogVisible = false;
    this.submitForm();
  }
  // 计划取消
  planCancel(): void {
    if (this.tableSelect.length == 0) {
      this.totast("请勾选巡检计划！");
      return;
    }
    let jhqxid = [];
    let jhqxlx = [];
    let jhztpd = false,
      qxztpd = false;
    for (let i = 0; i < this.tableSelect.length; i++) {
      let jhzt = this.tableSelect[i].STATUS;
      if (jhzt != "0" && jhzt != "1") {
        jhztpd = true;
        break;
      }
      if (this.tableSelect[i].SFQX == "2") {
        qxztpd = true;
        break;
      }
      jhqxlx.push(this.tableSelect[i].XSLX);
      jhqxid.push(this.tableSelect[i].ID);
    }
    if (jhztpd) {
      this.totast("只能取消状态为'未巡检'和'巡检中'的计划！");
      return;
    }
    if (qxztpd) {
      this.totast("已取消的计划不能再进行取消！");
      return;
    }
  }
  // ------------------------报告弹窗 ---------------------
  report_dialogVisible = false; //报告弹窗
  dialogVisible3 = false; //告警推送弹窗
  Manipulation = {};
  //关闭报告弹框
  closeHandel() {
    this.report_dialogVisible = false;
    this.queryAuxRealtimeList();
  }
  //报告弹窗里的告警推送
  paramsData = {};
  AlarmPush(val) {
    this.report_dialogVisible = false;
    this.paramsData = val;
    setTimeout(() => {
      this.dialogVisible3 = true;
    }, 400);
  }
  handleClose3() {
    this.dialogVisible3 = false;
    setTimeout(() => {
      this.report_dialogVisible = true;
    }, 400);
  }
  querysubmitForm() {
    this.pages.page = 1;
    this.submitForm();
  }
  // 查询
  setFrom: any = {};
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;

      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      // this.pages.page = 1;
      this.queryAuxRealtimeList();
      this.setFrom = JSON.parse(JSON.stringify(this.formData));
      console.log(this.setFrom);
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      Voltage: "",
      plantime: [],
      substation: "",
      isCancel: "",
      company: "",
      InspectType: "",
      planStatus: "",
    };
    this.queryAuxRealtimeList();
  }
  //table表格相关事件数据
  tableData = [];
  get newTableData() {
    let tableData = [];
    if (this.tableData.length) {
      let objPlan = {};
      let PlanstatusList = this.PlanstatusList;
      PlanstatusList.forEach((v) => {
        objPlan[v.code] = v.name;
      });

      let objCancel = {};
      let isCancelList = this.isCancelList;
      isCancelList.forEach((v) => {
        objCancel[v.code] = v.name;
      });
      tableData = this.tableData.map((v: any, i: any) => {
        v.STATUSName = objPlan[v.STATUS];
        // v.XSLXName = obj[v.XSLX];
        v.SFQXName = objCancel[v.SFQX];
        return v;
      });
    }
    return tableData;
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }

  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    // console.log(this.formData.plantime);
    this.formData.plantime = this.formData.plantime || [];
    let form = {
      rows: this.pages.pageSize, // 每页多少条
      page: this.pages.page, // 第几页
      dydj: this.formData.Voltage == null ? "" : this.formData.Voltage, // 电压等级
      jhkssjpre: this.formData.plantime ? this.formData.plantime[0] : "", // 计划开始时间
      jhkssjpos: this.formData.plantime[1]
        ? this.formData.plantime[1] + " 23:59:59"
        : "", // 计划结束时间
      bdzid: this.formData.substation, // 变电站ID
      // bdzmc: "",
      sfqx: this.formData.isCancel, // 是否取消''全部，0未取消,1取消
      ssds: this.formData.company, // 所属地市ID
      xjlx: this.formData.InspectType, // 巡检类型
      zxqk: this.formData.planStatus, // 计划状态''全部，0未执行，1执行中,2已执行,3执行失败
    };
    if (this.formData.InspectType == "0") {
      form.xjlx = "";
    }
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getJhglDetail({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        this.isShowLoading = false;
        let data = result.data;
        let originalData = data.rows;
        // console.log("originalData:", originalData);
        this.tableData = originalData;
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
        this.isShowLoading = false;
      });
  }
  // 设置表单数据
  setFormData() {
    let query = this.$route.query || {};
    let xjzt: any = query.xjzt || "";
    let startTime: any = query.startTime;
    let endTime: any = query.endTime;
    console.log(startTime, endTime);
    let obj = {
      未巡检: "0",
      巡检中: "1",
      巡检完成: "2",
      巡检失败: "3",
    };

    this.PlanstatusList.map((v: any, i: any) => {
      obj[v.name] = v.code;
    });

    let formData = lodash.cloneDeep(this.formData);
    let planStatus = obj[xjzt];
    formData.planStatus = planStatus;
    let plantime = lodash.cloneDeep(formData.plantime);
    if (startTime) {
      plantime[0] = startTime;
    } else if (startTime === "") {
      plantime[0] = startTime;
    }
    if (endTime) {
      plantime[1] = endTime;
    } else if (endTime === "") {
      plantime[1] = endTime;
    }
    formData.plantime = plantime;
    this.formData = formData;
  }
  // 默认一周时间
  getWeekTime() {
    let startDate = time(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).slice(
      0,
      10
    );
    let endDate = time(new Date()).slice(0, 10);
    this.formData.plantime = [startDate, endDate];
  }
  mounted() {
    console.log(this.$route.query.xjzt);
    let obj = window.sessionStorage.getItem("formData");
    // if (!obj) {
    //   window.sessionStorage.setItem("formData", "{}");
    // }
    this.getWeekTime();
    this.setFormData();

    // 查询表格数据
    if (obj) {
      if ((this as any).rputerPlan === "plan") {
        let forms = window.sessionStorage.getItem("formData");
        console.log("forms:", forms);
        if (forms != "{}") {
          this.formData = JSON.parse(forms);
          window.sessionStorage.setItem("formData", "{}");
        }
      }
    }

    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.plan-box1 {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .plan-header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .icon {
        width: 0.16rem;
        height: 0.18rem;
        background: url("../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .filter-box {
    height: 1.04rem;
    width: 100%;
    margin-top: 0.15rem;
    .filter-1 {
      height: 0.36rem;
      width: 100%;
      margin-top: 0.1rem;
      // .elform {
      //   width: 100%;
      // }
      .conditionQuryBtn {
        margin-left: 0.4rem;
      }
      .calender-query {
        width: 0.4rem;
        height: 0.36rem;
        margin-left: 1.48rem;
        background: url("../../../assets/img/JointInspection/xjjh_rl_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
  .bottom-border {
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(30, 60, 166, 1),
      rgba(255, 255, 255, 1),
      rgba(32, 62, 168, 1)
    );
    margin-top: 0.1rem;
  }
  .btn-box {
    height: 0.36rem;
    width: 100%;
    margin-top: 0.1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .self-table {
    // height: calc(100% - 3rem);
    height: calc(100% - 2.64rem);
    width: 100%;
    margin-top: 0.1rem;
  }
  .self-pagination {
    width: 100%;
    height: 0.6rem;
  }
}
</style>
<style lang="scss">
.operationMenu {
  .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: center;
     }
  
}
.birthDayTimeInput,
.el-date-editor.el-input {
  width: 100%;
  padding: 0 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-drawer__body {
  overflow-y: scroll;
}
.el-drawer__body::-webkit-scrollbar {
  display: none;
}
.el-drawer {
  background-color: #09143b;
}
.el-drawer__header {
  color: #fff;
  border-bottom: 2px solid #72767b;
  padding-bottom: 20px;
  span,button {
    outline: none;
  }
}
.plan-box1 {
  // 选择框输入框的宽度
  .el-select .el-input .el-input__inner {
    // width: 2.4rem;
    font-size: 0.18rem;
    padding: 0px 10px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    // width: 2.4rem;
    font-size: 0.18rem;
    padding: 0px 10px;
  }
  //   按钮样式
  .buttonWin {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }
  // // 表格修改
  // .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 0.4rem);
  //   .el-table__body {
  //     height: 94%;
  //   }
  // }

  // 时间段选取样式
  .inspectiontime {
    // 选择框输入框的宽度
    .el-select .el-input .el-input__inner {
      line-height: none;
      display: flex;
      align-items: center;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      line-height: none;
      display: flex;
      align-items: center;
    }
    .el-date-editor .el-range__icon {
      line-height: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-date-editor .el-range-separator {
      width: 10%;
      height: 0.25rem;
      display: flex;
      align-items: center;
      // line-height: 0.25rem;
      font-size: 0.18rem;
    }
    .el-date-editor .el-range-input {
      width: 100%;
      padding-left: 0.05rem;
    }
  }
  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }
}
</style>

